<template>
	<view class="rank-container">
		<scroll-view scroll-y="true" class="scroll">
			<view v-for="item in testRank" :key="item.rank" class="rank-item">
				用户名：{{item.username}}
				血量：{{item.score}}
				排名：{{item.rank}}
			</view>
		</scroll-view>

		<view>
			<button @click="gotoBagHome">退出</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				testRank: [{
						"username": "用户名",
						"score": 95,
						"rank": 1
					},
					{
						"username": "jane_doe",
						"score": 90,
						"rank": 2
					},
					{
						"username": "bob_smith",
						"score": 85,
						"rank": 3
					},
					{
						"username": "用户名",
						"score": 95,
						"rank": 4
					},
					{
						"username": "jane_doe",
						"score": 90,
						"rank": 5
					},
					{
						"username": "bob_smith",
						"score": 85,
						"rank": 6
					},
					{
						"username": "用户名",
						"score": 95,
						"rank": 7
					},
					{
						"username": "jane_doe",
						"score": 90,
						"rank": 8
					},
					{
						"username": "bob_smith",
						"score": 85,
						"rank": 9
					}
				]
			};
		},
		methods: {
			gotoBagHome() {
				uni.reLaunch({
					url: '/pages/bag-home/bag-home'
				})
			}
		}
	}
</script>

<style lang="scss">
	.rank-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.scroll {
		height: 200rpx;
		width: 600rpx;
	}
</style>